<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.wrap{
	font-size: 12px;
	margin:40px auto;
	width:300px;
}
.ui-slider-tooltip{	/* CSS属性顺序按照 字母首字母 排列*/
	background:#FCFDFD; 
	border:1px solid green;
	color:#222222;
	display: block;
	text-align: center;
	padding: 5px 3px 5px 3px;
	width: 80px;	
	position: relative; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	bottom:	-8px;
	display: block;
	height:0;
	left: 50%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}


/*制作小三角*/
.a{
	display: block;width:0;height:0;border:7px solid green;
}
.b{
	display: block;width:0;height:0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	border-bottom: 0;
}
</style>
</head>
<body>


<div class="wrap">
	<h1>第二步：制作小三角</h1>

	<span class="a"></span>

	<br/>

	<span class="b"></span>

	<br/>
	
	<span class="b" style="border-top: 12px solid green;"></span>

	<br/>

	<p>把小三角嵌套到文字中。</p>


	<span class="ui-slider-tooltip  ui-corner-all">
		<span>0元</span>
		<span class="ui-tooltip-pointer-down"></span>
	</span>

	<br/>

	<span class="ui-slider-tooltip  ui-corner-all">
		<span>1000元</span>
		<span class="ui-tooltip-pointer-down"></span>
	</span>
	
	<p>制作小三角的原理比较简单，在display:block的状态下，把元素的宽度和高度设置为0，给元素的不同边框设置不同的属性。
	比如 ，我们要实现倒三角，那么可以把元素的左右都设置为透明，只设置一个高度有颜色即可。</p>
	<p>为什么左右要透明？</p>
	<p>这样一来就可以挡住 左右2边的border。看起来，就像一个倒三角了。</p>
	<p>嵌套到文字中的时候，需要注意定位问题，需要提醒的是倒三角是没有宽度和高度的，只有border。</p>

	<p>倒三角只想留下1px宽度怎么做？看第三步</p>
</div>
</body>
</html>

